<template>
  <canvas :id="canvasId" :style="style"></canvas>
</template>

<script>
export default {
  name: "DrawCompareImage",
  props: {
    faceImage: {
      type: String,
      default: null
    },
    results: {
      type: [],
      default: null
    },
    fontSize: {
      type: Number,
      default: 20
    },
  },
  data () {
    return {
      canvasId: 'canvas_' + Math.floor(Math.random()*1000000),
      style: null,
      ctx: null,
    }
  },
  mounted () {
    let canvas = document.getElementById(this.canvasId)
    let ctx = canvas.getContext('2d')
    this.ctx = ctx;
    let image = new Image()
    image.onload = () => {
      // 计算缩放比例
      const containerHeight = canvas.parentElement.clientHeight;
      const scale = containerHeight / image.height;
      const newWidth = image.width * scale;

      canvas.height = containerHeight;
      canvas.width = newWidth;
      this.style = {
        width: '100%',
        height: '100%',
        objectFit: 'contain'
      }

      ctx.drawImage(image, 0, 0, newWidth, containerHeight)
      ctx.beginPath();

      ctx.lineWidth="2"
      ctx.strokeStyle="red"
      ctx.font = 'bolder ' + this.fontSize + 'px Arial';
      ctx.fillStyle = "red"
      console.log(this.results)
      const { x, y, w, h } = this.results
      ctx.rect(x * scale, y * scale, w * scale, h * scale)
      ctx.stroke()
    }
    image.src = this.faceImage
  }
}
</script>

<style scoped>

</style>
